<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id='btn'>ajax</button>

    <form action="http://localhost:8080/repositories" method="GET">
        <input type="text" name="language" value="go" />
        <input type="text" name="since" value="monthly" />
        <input type="file" name="file" value="file" />
        <input type="submit" />
    </form>

    <script>
        let xhr
        btn.onclick = function () {

            //创建XMLHttpRequest并进行兼容性调试
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP"); //ie兼容
            }
            let obj2 = {
                name: 123
            }

            xhr.open('POST', 'http://localhost:8000/serverPost', true) //true是否异步

            // GET无法使用send 参数形式 ?name=123&val=456
            // send  只能接收字符串 其他一律将会转成[object,object]
            // 1.默认的Content - Type为text / plain。
            // 2.Request Payload会对非字符串做字符串转换，变为[object,object]
            // 3.通过xhr.send(JSON.stringify(obj)); 才能进行正确传参
            // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//设置响应头'name = 123&val=456' ,如传入其他的，这会将传入变为key ，例如传入：
            // xhr.setRequestHeader('Content-Type', 'multipart/form-data ')//设置响应头  JSON.stringify(obj)
            // xhr.setRequestHeader('Content-Type', 'application/json')//设置响应头  JSON.stringify(obj)
            // xhr.setRequestHeader('Content-Type', 'text/xml')//设置响应头  纯文本字符串
            // xhr.setRequestHeader('Content-Type', '   ')//设置响应头  纯文本字符串
            // xhr.responseType = 'json'//
            var formData = new FormData();
            formData.append('user', 123456);
            formData.append('pass', 12345678);
            var obj = { a: 1, b: 2 };

            xhr.send(JSON.stringify(obj))

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.status) //状态码
                        console.log(xhr.statusText) //状态字符串
                        console.log(xhr.getAllResponseHeaders()) //响应头
                        console.log(xhr.response) //响应体 
                    }
                }
            }
        }
    </script>
</body>

</html>